<script setup>
import {ref} from 'vue'

const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleOpen = () => {

}
const handleClose = () => {

}
import {useRouter} from "vue-router";

const router = useRouter();
const logout = () => {
  //删除保存的token和其他信息
  localStorage.removeItem("username")
  localStorage.removeItem("id")
  localStorage.removeItem("token")
  router.push('/login')
}
const username = localStorage.getItem("username")
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color: #3094d6" height="50px">
        <el-row>
          <el-col :span="16">
            <span class="highlight-text">CoolShark商城后台管理系统</span>
          </el-col>
          <el-col :span=8 class="highlight-text">
            欢迎{{ username }}回来
            <el-button @click="logout">退出登录</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px" style="">
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              router
          >
            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>分类管理</span>
              </template>

              <el-menu-item index="/home/categorylist">分类列表</el-menu-item>
              <el-menu-item index="/home/addcategory">添加分类</el-menu-item>

            </el-sub-menu>


            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>轮播图管理</span>
              </template>

              <el-menu-item index="/home/carousellist">轮播图列表</el-menu-item>
              <el-menu-item index="/home/addcarousel">添加轮播图</el-menu-item>

            </el-sub-menu>

            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>商品管理</span>
              </template>

              <el-menu-item index="/home/goodslist">商品列表</el-menu-item>
              <el-menu-item index="/home/addgoods">添加商品</el-menu-item>

            </el-sub-menu>
            <!--            <el-menu-item index="2">-->
            <!--              <span>分类管理</span>-->
            <!--            </el-menu-item>-->

            <!--            <el-menu-item index="3" disabled>-->
            <!--              <span>aaaa</span>-->
            <!--            </el-menu-item>-->


          </el-menu>

        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.highlight-text {
  font-size: 36px; /* 字体大小 */
  color: white; /* 文字颜色为白色 */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6); /* 亮光效果 */
  font-weight: bold; /* 字体加粗，增加醒目感 */
}

</style>
